Tengo una serie de ciudades var cities = ['Berlin', 'Bucharest', 'Paris', 'Munich', 'Amsterdam', 'Milan']; Esta matriz debe filtrarse en función de la entrada de búsqueda pasada (por ejemplo, el usuario ingresa 'm' y muestra 'Munich', 'Amsterdam' y 'Milán' , luego el usuario agrega 'a' a 'm' en la búsqueda entrada (escribe 'ma' ), y le muestra "Amsterdam" y "Milán" , aunque estas letras no son una inmediatamente después de la otra). Además, necesito que estas letras se resalten de alguna manera, así que, digamos, las letras 'm' y 'a' en estas palabras son amarillas.
Esto es lo que he hecho hasta ahora, pero no funciona como lo necesito.
var input = document.querySelector("input").value.toLowerCase().trim(); document.addEventListener('input', search) function search() { var filteredArray = cities.filter(x => x.toLowerCase().includes(input)); console.log(filteredArray);//to see what I've got }¡Agradezco cualquier ayuda! Soy nuevo en JavaScript. ¡Gracias!
Podrías filtrar así.
document.addEventListener('input', search); const cities = ['Berlin', 'Bucharest', 'Paris', 'Munich', 'Amsterdam', 'Milan']; function search(e) { const input = e.target.value.toLowerCase().trim(); const filteredArray = cities.filter(x => { const c = x.toLowerCase(); let m = 0; for (let l of input) { const i = c.substr(m).indexOf(l); if (i < m) return false; m = i; } return true; }); console.log(filteredArray);//to see what I've got } <input>Además, es posible que recuerde los índices para resaltar las letras coincidentes.